<!--
 * @Author: 236180300 236180300@qq.com
 * @Date: 2024-01-17 14:48:26
 * @LastEditors: 236180300 236180300@qq.com
 * @LastEditTime: 2024-01-17 14:52:38
 * @FilePath: \Admin\src\views\wi\StatusMonitor\StatusMonitor.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="page-main OnlineStatusMonitor">
        <DataTable
            ref="StatusMonitorDataTableRef"
            :data="list"
            :hasTop="false"
            :hasAdd="false"
            :hasFilter="false"
            :hasCheckbox="false"
            :page-index="pageInfo.pageIndex"
            :page-size="pageInfo.pageSize"
            :total-count="pageInfo.totalCount"
            divHeight="calc(100vh - 158px)"
            @page-change="onPageChange"
            v-bind="$attrs">
            <vxe-column title="设备ID" min-width="100" show-overflow>
                <template #default="{ row }">
                    {{ row.deviceID || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳类型" min-width="50" show-overflow>
                <template #default="{ row }">
                    {{ row.lastMHCheckModel.wireropeType || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="钢丝绳编号" min-width="50" show-overflow>
                <template #default="{ row }"> 
                    {{ row.lastMHCheckModel.wireropeSN || "-" }} </template>
            </vxe-column>

            <vxe-column title="钢丝绳直径" min-width="50" show-overflow>
                <template #default="{ row }">
                    {{ row.lastMHCheckModel.diameter || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="公司" min-width="50" show-overflow>
                <template #default="{ row }"> 
                    {{ row.lastMHCheckModel.company || "-" }} </template>
            </vxe-column>

            <vxe-column title="负责人" min-width="50" show-overflow>
                <template #default="{ row }"> 
                    {{ row.lastMHCheckModel.responsiblePerson }} </template>
            </vxe-column>

            <vxe-column title="报告名" min-width="50" show-overflow>
                <template #default="{ row }"> 
                    {{ row.lastMHCheckModel.reportName || "-" }} </template>
            </vxe-column>

            <vxe-column title="检测时间" min-width="100" show-overflow>
                <template #default="{ row }"> 
                    {{ formatTime(row.lastMHCheckModel.checkTime) }} 
                </template>
            </vxe-column>

            <vxe-column title="状态" min-width="50" show-overflow>
                <template #default="{ row }">
                    {{ row.lastMHCheckModel.state || "-" }}
                </template>
            </vxe-column>

            <vxe-column title="内容" min-width="200" show-overflow>
                <template #default="{ row }"> 
                    {{ row.lastMHCheckModel.content || "-" }} </template>
            </vxe-column>
        </DataTable>
    </div>
</template>

<script lang="ts" setup>
import Gx from "@/gx/Gx";
/********************************************** 列表相关定义 **********************************************/

//表格的数据
const list = ref([]);

//分页信息
const pageInfo = reactive({
    pageIndex: 1,
    pageSize: 20,
    totalCount: 0,
    orderBy: "[MHID] DESC",
});

//搜索条件
const filterModel = ref<any>({});

//搜索条件空对象的json字符串，用于清空搜索条件时使用
const filterModelJson = Gx.SerializeObject(filterModel.value);

/********************************************** 列表方法与事件 **********************************************/

//页面加载
onMounted(() => {
    Init();
});

//初始化
const Init = () => {
    GetPage();
};

//分页方法
const GetPage = () => {
    let _data = {};
    MergeObjs(_data, filterModel.value);

    App.CallApi(Api.MagnetHead.GetStatusMonitorPage(pageInfo.pageIndex, pageInfo.pageSize, pageInfo.orderBy), {
        data: _data,
        success: (res: any) => {
            list.value = res.items;
            pageInfo.totalCount = res.totalCount;
        },
    });
};

//分页改变
const onPageChange = (data: any) => {
    pageInfo.pageIndex = data.currentPage;
    pageInfo.pageSize = data.pageSize;
    GetPage();
};

//高级搜索点击搜索按钮
const onSearchFilter = () => {
    pageInfo.pageIndex = 1;
    GetPage();
};

//高级搜索点击清空按钮
const onClearFilter = () => {
    filterModel.value = Gx.DeserializeObject(filterModelJson);
    pageInfo.pageIndex = 1;
    GetPage();
};

const timeFormatCache = ref({});
const formatTime = (timestamp: number) => {
  if (!timestamp) {
    return "-";
  }
  if (timeFormatCache.value[timestamp]) {
    return timeFormatCache.value[timestamp];
  }
  const formattedTime = new Date(timestamp * 1000).toLocaleString();
  timeFormatCache.value[timestamp] = formattedTime;
  return formattedTime;
};
</script>

<style lang="scss" scoped>
.icon-gangsishengbaojing {
    font-size: 32px;
}
.greenLight {
    color: #67c23a;
}
.blueLight {
    color: #409eff;
}
.yellowLight {
    color: #f4ea2a;
}
.orangeLight {
    color: #fea821;
}
.grayLight {
    color: #909399;
}
</style>
